<template>
	<div>
		<el-upload
		:action="action"
		:headers="headers"
		:multiple="multiple"
		:with-credentials="false"
		:data="data"
		:show-file-list="false"
		:drag="false"
		:accept="accept"
		:on-preview="onPreview"
		:on-remove="onRemove"
		:on-success="onSuccess"
		:before-upload="beforeUpload"
		:on-exceed="onExceed"
		list-type="text"
		:auto-upload="true"
		:file-list="fileList"
		:disabled="disabled"
		:limit="limit">
			<el-button v-if="!disabled" slot="default" type="primary">{{ title }}</el-button>
		</el-upload>
	</div>
</template>

<script>
	/* eslint-disable */
	export default {
		name: "el-upload-file",
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			multiple: {
				type: Boolean,
				default: true
			},
			accept: {
				type: String,
				default: "*"
			},
			limit: {
				type: Number,
				default: 1
			},
			value: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: "选择文件"
			},
		},
		model: {
			prop: "value",
			event: "change"
		},
		watch: {
			value() {
				if (this.fileList.length !== this.value.length) {
					this.fileList = this.value;
					return;
				}
				if (this.fileList.length === this.value.length) {
					const result = this.fileList.some((item, index) => {
						return item.url !== this.value[index].url;
					});
					if (result) {
						this.fileList = this.value;
						return;
					}
				}
			}
		},
		mounted() {
			this.fileList = this.value;
		},
		data() {
			return {
				action: "/admin/ajax/upload",
				data: {},
				headers: {
					batoken: this.$store.state.token
				},
				fileList: [],
				previewUrl: "",
				previewShow: false
			};
		},
		methods: {
			onPreview(file) {
				this.previewUrl = file.url;
				this.previewShow = true;
			},
			onRemove(file, fileList) {
				this.fileList = fileList;
				this.$emit(
					"change",
					fileList.map(item => {
						if (item.response) {
							return {
								url: "http://nhcj.app65.cn/" +
									item.response.data.file.url,
								name: item.name
							};
						} else {
							return {
								url: item.url,
								name: item.name
							};
						}
					})
				);
			},
			onSuccess(response, file, fileList) {
				if (response.code === 1) {
					this.$message.success(response.msg);
					this.fileList = fileList;
					this.$emit(
						"change",
						fileList.map(item => {
							if (item.response) {
								return {
									url: "http://nhcj.app65.cn/" +
										item.response.data.file.url,
									name: item.name
								};
							} else {
								return {
									url: item.url,
									name: item.name
								};
							}
						})
					);
				} else {
					this.$message.error(response.msg);
				}
			},
			beforeUpload(file) {
				const isAllowSize = file.size / 1024 / 1024 < 4;
				const acceptArr = this.accept.split(",");
				const fileNameSplit = file.name.split(".");
				const suffix = "." + fileNameSplit[fileNameSplit.length - 1];
				const isAllowType = this.accept == '*' ? true : acceptArr.indexOf(suffix) >= 0;
				if (!isAllowSize) {
					this.$message.error("上传文件大小不能超过4M!");
				}
				if (!isAllowType) {
					this.$message.error(`只能上传${acceptArr.join("/")}格式`);
				}
				return isAllowSize && isAllowType;
			},
			onExceed(files, fileList) {
				this.$message.error("上传文件数量不能超过" + this.limit + "个");
			}
		}
	};
</script>
